<template>
	<view>
		<view class="dynamic">
			<view class="user__container" :style="'display: '+userDisplay+';'">
				<view class="user__header-warp">
					<!-- 头像组 -->
					<view class="user__header" @click.stop="clickUser()">
						<image class="user__header-image" :src="item.icon" mode="aspectFill"></image>
					</view>
				</view>
				<view class="user__content">
					<view class="user__content-main">
						<text class="user__content-title uni-ellipsis" @click.stop="clickUser()">{{ item.name }}</text>
						<text class="user__content-note uni-ellipsis">{{item.createTime}}</text>
					</view>
					<view class="user__content-extra" v-show="item.userid==user.id">
						<u-icon name="more-dot-fill" @click.stop="clickDelete()"></u-icon>
					</view>
				</view>
			</view>

			<!-- <view class="text text_title" style="word-break: break-word;">{{item.title}}</view> -->
			<u-read-more class="text text_title" show-height="100" :toggle="true" close-text="展开">
				<rich-text style="word-break: break-word;" :nodes="item.title"></rich-text>
			</u-read-more>
			<view class="imagess box box-align-center mt10">
				<view class="item mr10" v-for="(ite,i) in item.conts" :key="i" @click="previewImage(item.conts,i)">
					<u-image :src="ite.fileSuffix=='mp4'?ite.firstFrame:ite.url" width="160rpx" height="160rpx" :fade="false">
						<u-loading slot="loading"></u-loading>
					</u-image>
					<u-image src="@/static/home/icon_play.png" width="40rpx" height="40rpx" class="posa" :fade="false"
						v-if="ite.fileSuffix =='mp4'">
						<u-loading slot="loading"></u-loading>
					</u-image>
				</view>
			</view>
			<view class="operate box box-pack-end" :style="'display: '+operateDisplay+';'">
				<view class="operate-wap" @click="handleUp()">
					<u-icon name="thumb-up" color="#787cc8" v-show="isDz==0"></u-icon>
					<u-icon name="thumb-up-fill" color="#5058C8" v-show="isDz>0"></u-icon>
					<view class="operate-text"
						:style="'padding-left:30upx;color:'+ (isLike? operateUpColor:operateColor)">
						{{isLike?'':dzcnt}}
					</view>
				</view>
				<view class="operate-wap" @click="clickChat()">
					<u-icon name="chat"></u-icon>{{chatNumber}}
				</view>
				<view class="operate-wap" @click="shareDt(item)">
					<u-icon name="share"></u-icon>
				</view>
			</view>
			<!-- 点赞人列表 -->
			<view class="source box box-pack-start box-align-center" v-if="dzcnt>0">
				<u-icon name="thumb-up" color="#5058C8"></u-icon>
				<view class="source-text box box-pack-start box-align-center">
					<view class="" v-for="(i,index) in dzUsers" :key="index">
						<span style="margin-left: 3px;" v-if="i.name!=undefined"> {{i.name}}</span>
					</view>
				</view>
			</view>

		</view>
		<view class="bottom-line"></view>
		<!-- 删除 -->
		<u-action-sheet :list="list" v-model="show" @click="comfirm()"></u-action-sheet>
		<!-- 评论 -->
		<u-popup v-model="pLshow" mode="bottom" height="70%" @close="close">
			<view class="chart-cont">
				<view class="chart-top">
					<view class="chart-cnt">
						{{page.total}}条评论
					</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="chart-bottom" v-if="pinglunlist.length !=0">
					<view class="" v-for="item in pinglunlist" :key="item">
						<view class="user__container" :style="'display: '+userDisplay+';'">
							<view class="user__header-warp">
								<view class="user__header" @click.stop="clickUser()">
									<image class="user__header-image" :src="item.icon" mode="aspectFill"></image>
								</view>
							</view>
							<view class="user__content">
								<view class="user__content-main">
									<text class="user__content-title uni-ellipsis">{{item.name }}</text>
									<text class="user__content-note uni-ellipsis">{{item.pubTime}}</text>
								</view>
							</view>
						</view>
						<view class="texts">{{item.content}}</view>
					</view>
					<u-loadmore :status="status" @loadmore="fenye()" />
				</view>
				<view class="chart-bottom box box-align-center box-pack-center" v-else>
					暂无评论
				</view>
				<view class="chart-input" :style="'bottom:'+KeyboardHeight+'px;'">
					<textarea v-model="chartText" placeholder="留下你的精彩评论吧" :adjust-position="true"
						@focus="textareaFocus()" />
					<view @click="clickSend()" class="send-btn">发送</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-modal v-model="showdel" title="确认删除" content="确认删除本条班级动态？" @cancel="handleCancel" @confirm="confirmdel"
			show-cancel-button=true>
		</u-modal>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object
			},
			avatar: {
				type: String
			},
			name: {
				type: String
			},
			publishTime: {
				type: Number
			},
			isFocusOn: {
				type: Boolean
			},
			content: {
				type: String
			},
			imgList: {
				type: Array
			},
			isLikeCnt: {
				type: Array
			},
			isGiveReward: {
				type: Boolean
			},
			likeNumber: {
				type: Number
			},
			giveRewardNumber: {
				type: Number
			},
			chatNumber: {
				type: Number
			},
			userNoShow: {
				type: Boolean
			},
			operateNoShow: {
				type: Boolean
			},
			sourceShow: {
				type: Boolean
			},
			sourceImg: {
				type: String
			},
			sourceTitle: {
				type: String
			},
			sourceAuthor: {
				type: String
			}
		},
		data() {
			return {
				user: uni.getStorageSync('user'),
				islike: false,
				windowWidth: 0, //屏幕可用宽度
				windowHeight: 0, //屏幕可用高度
				imgWidth: 0, //图片宽度
				imgHeight: 0, //图片高度
				userDisplay: 'flex',
				operateDisplay: 'flex',
				sourceDisplay: 'flex',
				operateColor: 'gray',
				operateUpColor: '#e85142',
				thumbImg: '/static/qizai9527-dynamic/image/like.png',
				thumbUpImg: '/static/qizai9527-dynamic/image/like-hover.png',
				rewordImg: '/static/qizai9527-dynamic/image/medal.png',
				rewordUpImg: '/static/qizai9527-dynamic/image/medal-hover.png',
				commentsImg: '/static/qizai9527-dynamic/image/comments.png',
				list: [{
					text: '删除'
				}],
				show: false,
				pLshow: false,
				keyShow: false,
				chartText: '',
				KeyboardHeight: '',
				showdel: false,
				isDz: this.item.isDz,
				dzUsers: this.item.dzUsers,
				dzcnt: this.item.dzUsers.length,
				pinglunlist: [], //评论列表
				plNum: this.item.plNum, //评论数
				page: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
					pages: 1
				}
			}
		},
		onReachBottom(e) {
			this.fenye()
		},
		mounted() {
			// console.log(this.item)
			const res = uni.getSystemInfoSync();
			this.windowHeight = res.windowHeight;
			this.windowWidth = res.windowWidth;

			if (this.userNoShow) {
				this.userDisplay = 'none';
			}
			if (this.operateNoShow) {
				this.operateDisplay = 'none';
			}
			if (this.sourceShow) {
				this.sourceDisplay = 'flex';
			}
			this.judgeImg();
		},
		methods: {
			shareDt(item) {
				this.$emit('clickFx')
			},
			fenye() {
				if (this.page.pageNum >= this.page.pages) return;
				this.status = 'loading';
				this.page.pageSize = this.page.pageSize + 10;
				this.clickChat()
			},
			textareaFocus() {
				wx.onKeyboardHeightChange(res => {
					console.log(res);
					uni.showToast({
						title: res
					})
					this.KeyboardHeight = res.height
				})
			},
			// 预览图片
			previewImg() {
				uni.previewImage({
					urls: this.imgList,
					longPressActions: {
						itemList: ['保存图片'],

					}
				})
			},
			// 自适应判断
			judgeImg() {
				if (this.imgList.length == 1) {
					this.imgWidth = this.windowWidth * 2 / 3;
					this.imgHeight = this.windowHeight * 3 / 5;
				} else if (this.imgList.length == 4) {
					this.imgWidth = this.windowWidth / 3.8;
					this.imgHeight = this.imgWidth;
				} else {
					this.imgWidth = this.windowWidth / 3.8;
					this.imgHeight = this.imgWidth;
				}
			},
			timestampFormat(timestamp) {
				if (!timestamp) return '';

				function zeroize(num) {
					return (String(num).length == 1 ? '0' : '') + num;
				}

				var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
				var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

				var curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
				var tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

				var Y = tmDate.getFullYear(),
					m = tmDate.getMonth() + 1,
					d = tmDate.getDate();
				var H = tmDate.getHours(),
					i = tmDate.getMinutes(),
					s = tmDate.getSeconds();

				if (timestampDiff < 60) { // 一分钟以内
					return "刚刚";
				} else if (timestampDiff < 3600) { // 一小时前之内
					return Math.floor(timestampDiff / 60) + "分钟前";
				} else if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == m && curDate.getDate() == d) {
					return '今天' + zeroize(H) + ':' + zeroize(i);
				} else {
					var newDate = new Date((curTimestamp - 86400) * 1000); // 参数中的时间戳加一天转换成的日期对象
					if (newDate.getFullYear() == Y && newDate.getMonth() + 1 == m && newDate.getDate() == d) {
						return '昨天' + zeroize(H) + ':' + zeroize(i);
					} else if (curDate.getFullYear() == Y) {
						return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					} else {
						return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
					}
				}
			},
			previewImage(val, i) {
				if (val[i].fileSuffix == `mp4`) {
					uni.navigateTo({
						url: `/pageHome/video?url=` + val[i].url
					})
				} else {
					let it = JSON.stringify(val)
					uni.setStorage({
						key: 'item',
						data: it
					})
					// uni.setStorageSync("stu_preview",it);
					uni.navigateTo({
						url: `/pageHome/bjqShow?index=` + i + `&val=` + encodeURIComponent(it)
					})
				}
			},
			/** 触发父级事件 */
			// 点击动态
			clickDynamic() {
				this.$emit('clickDynamic');
			},
			// 点击用户信息
			clickUser() {
				this.$emit('clickUser');
			},
			// 点击删除
			clickDelete() {
				// this.show = true
				this.$emit('clickDelete', this.item.id);
				console.log(this.item.id);
			},
			comfirm(index) {
				console.log(`你点击了第${index}个`);
				this.showdel = true;
			},
			handleCancel() {},
			confirmdel() {
				this.$api.post({
					url: '/ybjq/delBjq',
					method: 'post'
				}, {
					id: this.item.id
				}).then(res => {
					console.log(res)
					if (res.code == "0") {
						this.$refs.uToast.show({
							title: '已删除',
							type: 'success',
							duration: '1500'
						});
						this.$emit('bjqlist');
					}
				})
			},
			// 点赞
			clickThumbsup() {
				this.$emit('clickThumbsup');
			},
			// 点击打赏
			clickGiveReward() {
				this.$emit('clickGiveReward');
			},

			// 点击聊天
			clickChat() {
				this.$emit('clickChat', this.item.id)
			},
			// 点击原链接
			clickSource() {
				this.$emit('clickSource');
			},
			// close() {
			// 	this.pLshow = false
			// 	console.log(this.pLshow);
			// 	this.$emit('bjqlist');
			// },
			clickSend() {
				this.$api.post({
					url: '/comm/chkWords',
					method: 'post'
				}, {
					cont: this.chartText
				}).then(res => {
					if (res.risky == true) {
						this.$refs.uTips.show({
							title: '检测到违规内容，请重新编辑！',
							type: 'warning',
							duration: '2500'
						});
						this.chartText = "";
					}
					if (this.chartText != '') {
						this.$api.post({
							url: '/ybjqpl/add',
							method: 'post'
						}, {
							cont: this.chartText,
							bjqId: this.item.id,
							createUser: this.user.id
						}).then(res => {
							if (res.code == 0) {
								// console.log({icon:this.user.icon,content:this.chartText,name:this.user.name})
								// this.pinglunlist.unshift({
								// 	icon: this.user.icon,
								// 	content: this.chartText,
								// 	name: this.user.name
								// });
								// this.plNum++;
								this.clickChat()
								this.chartText = "";
							}
						})
					} else {
						this.$refs.uToast.show({
							title: '评论不能为空',
							type: 'info'
						})
					}
				})
			},
			handleUp() {
				if (this.isDz == 0) {
					this.isDz = 1;
					this.dz();
				} else {
					this.isDz = 0;
					this.canceldz();
				}
			},
			dz() {
				this.$api.post({
					url: '/ybjq/dz',
					method: 'post'
				}, {
					bjqid: this.item.id,
					userid: this.user.id,
					username: this.user.name
				}).then(res => {
					if (res.code == 0) {
						this.dzUsers.push({
							id: this.user.id,
							name: this.user.name
						});
						this.dzcnt++;
						// console.log(this.dzUsers)
					}
				})
			},
			canceldz() {
				this.$api.post({
					url: '/ybjq/canceldz',
					method: 'post'
				}, {
					bjqid: this.item.id,
					userid: this.user.id
				}).then(res => {
					if (res.code == 0) {
						var _this = this;
						this.dzUsers.forEach(function(item, index, arr) {
							if (item.name == _this.user.name) {
								delete _this.dzUsers[index];
							}
						});
						this.dzcnt--;
						console.log(this.dzUsers)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.dynamic {
		width: 96%;
		font-size: 30upx;
		background-color: white;
		padding: 2%;
	}

	.allImage {
		display: flex;
		margin-top: 10upx;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.imgList {
		margin: 0 3%;
	}

	.images:not(:nth-child(3n)) {
		/* margin-right: 10rpx; */
	}

	.text {
		margin: 1% 3% 2%;
	}

	.texts {
		padding-left: 11%;
		margin: 1% 3% 2%;
	}

	.images {
		position: relative;
		margin-right: 10upx;
		display: inline-block;
	}

	/** 源路径样式 */
	.source {
		margin: 1% 3%;
		display: flex;
		padding: 14upx;
		background-color: #e8e8e869;
	}

	.source image {
		width: 80upx;
		height: 80upx;
	}

	.source-text {
		margin-left: 16upx;
	}

	.source-text-desc {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.source-text-author {
		font-size: 26upx;
		color: gray;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.operate {
		width: 100%;
		font-size: 24upx;
	}

	.operate-wap {
		display: inline-block;
		width: 116rpx;
		padding: 2%;
		padding-bottom: 0;
		font-size: 28upx;
		position: relative;
	}

	.operate-icon {
		width: 34upx;
		height: 34upx;
	}

	.operate-text {
		display: inline-block;
		position: absolute;
		margin-left: 8upx;
	}


	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 24upx;
		color: #999;
	}

	.bottom-line {
		margin-bottom: 20upx;
	}

	.user__container {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: row; */
		flex-direction: row;
		-webkit-box-flex: 1;
		/* -webkit-flex: 1; */
		flex: 1;
		padding: 14upx 18upx;
		position: relative;
		overflow: hidden;
	}

	.user__header {
		display: flex;
		width: 80upx;
		height: 80upx;
		-webkit-border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
		border-radius: 80upx;
	}

	.user__header-image {
		display: flex;
		align-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		width: 80upx;
		height: 80upx;
		border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
	}

	.user__content {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-flex: 1;
		flex: 1;
		overflow: hidden;
		padding: 4upx 0;
	}

	.user__content-main {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 14upx;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		overflow: hidden;
	}

	.user__content-note {
		margin-top: 3px;
		color: #999;
		font-size: 24upx;
		font-weight: normal;
		overflow: hidden;
	}

	.user__focus-on {
		padding: 3px 10px;
		border: 1px solid #fb5f5f;
		color: #fb5f5f;
		display: flex;
		font-size: 24px;
		border-radius: 6upx;
	}

	.user__focus-off {
		padding: 3px;
		color: gray;
		font-size: 24upx;
	}

	.video {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.chart-cont {
		position: relative;
	}

	.chart-top {
		position: fixed;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		z-index: 100;
		/* border-bottom: 2rpx solid #C0C0C0; */
	}

	.chart-cnt {
		width: 680rpx;
		text-align: center;
	}

	.chart-bottom {
		padding: 100rpx 0 120rpx;
	}

	.chart-input {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 2rpx solid #C0C0C0;
	}

	.chart-input textarea {
		box-sizing: border-box;
		padding: 43rpx 0 0 20rpx;
		width: 560rpx;
		height: 100%;
	}

	.send-btn {
		width: 100rpx;
		height: 120upx;
		line-height: 120upx;
		margin-left: 16upx;
	}

	
	.imagess {
		flex-wrap: wrap;
		margin-left: 86rpx;
	
		.item {
			position: relative;
			margin-bottom: 20rpx;
	
			.posa {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
	
	/deep/ .u-content__showmore-wrap{
		justify-content: flex-end;
	}
</style>
